<!--设备表格-->
<template>
	<div>
		<Table highlight-row :height="tableHeight" :columns="columns" :data="data" ref="table" style="position:static"
			class="table"></Table>
		<!-- 详情展示 -->
		<transition name="fade">
			<div class="detail-box" @click.stop="closeSider($event)" v-if="siderShow">
				<detail-content :serialId="currentId" :defaultTime="defaultTime"></detail-content>
			</div>
		</transition>
	</div>
</template>

<script>
import filters from '@/assets/js/filters'
import batteryBox from '../../components/battery'
import detailContent from '@/views/detail'
import store from '../../store/index'
export default {
	props: ['devList'],
	components: {
		batteryBox, // 电池图标
		detailContent
	},
	computed: {
		data() {
			return this.devList
		}
	},
	data() {
		return {
			siderShow: false, // 侧边栏
			currentId: '', // 当前选择的设备id
			defaultTime: '', // 设备开始记录时间，详细数据查询的开始时间
			tableHeight: '', // 表格高度
			columns: [
				// 序列号
				{
					title: '#',
					type: 'index',
					sortable: true
				},
				// 设备id
				{
					title: 'id',
					key: 'serialId'
				},
				// 运单
				{
					title: '运单',
					key: 'trackID'
				},
				// 温度
				{
					title: '温度',
					key: 'CurrentTemp',
					render: (h, params) => {
						return h('span', filters.temperature(params.row.CurrentTemp))
					}
				},
				// 位置
				{
					title: '位置',
					key: 'readPlace',
					render: (h, params) => {
						return h('span', filters.area(params.row.readPlace))
					}
				},
				// 更新时间
				{
					title: '更新时间',
					key: 'readTime',
					render: (h, params) => {
						return h('span', filters.up_time(params.row.readTime))
					}
				},
				// 报警
				{
					title: '警报',
					key: 'CurrentTemp',
					render: (h, params) => {
						let data = params.row.CurrentTemp
						let up = params.row.downTemperature
						let down = params.row.upTemperature
						return h('span', {
							class: 'warning-icon'
						}, [
							h('Icon', {
								props: {
									type: (data < down ? 'md-trending-up' : data > up ? 'md-trending-down' : down < data < up ? 'md-checkmark' : data)
								}
							})
						])
					}
				},
				// 电量
				{
					title: '电量',
					key: 'batValue',
					sortable: true,
					render: (h, params) => {
						return h(batteryBox, {
							props: {
								num: parseFloat(params.row.batValue),
								width: 44,
								height: 20
							}
						})
					}
				},
				{
					title: '操作',
					key: 'action',
					align: 'center',
					render: (h, params) => {
						return h('div', {
							'class': {
								'handle-box': true
							}
						}, [
							h('Button', {
								props: {
									type: 'primary',
									size: 'small'
								},
								on: {
									click: () => {
										this.remove(params)
									}
								}
							}, '移除'),
							h('Button', {
								props: {
									type: 'primary',
									size: 'small'
								},
								on: {
									click: () => {
										this.$emit('pauseTime', 'stop') // 通知父组件，暂停定时
										this.defaultTime = params.row.tempTime
										this.currentId = params.row.serialId
										this.siderShow = true
									}
								}
							}, '查看'),
							h('Button', {
								class: 'refresh',
								props: {
									type: 'primary',
									size: 'small',
									icon: params.row.loading ? 'ios-loading' : '',
									disabled: params.row.loading ? true : false
								},
								on: {
									click: () => {
										let data = {
											serialId: params.row.serialId,
											query_type: '2',
											startTime: '2000-01-01 01:30:10',
											endTime: this.$moment().format('YYYY-MM-DD HH:mm:ss')
										}
										this.refresh(data, params.index)
									}
								}
							}, '刷新')
						])
					}
				}
			]
		}
	},
	mounted() {
		// 屏幕自适应表格高度
		this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 220
	},
	methods: {
		// 侧边栏关闭
		closeSider(e) {
			let el1 = e.currentTarget
			let el2 = e.target
			if (el1 === el2) {
				this.siderShow = false
				this.$emit('pauseTime', 'start') // 关闭侧边栏后通知继续按照定时刷新
			}
		},
		// 移除设备id
		remove(params) {
			this.$Modal.confirm({
				title: '移除设备',
				content: `确定移除设备“${params.row.serialId}”的信息？`,
				onOk: () => {
					this.data.splice(params.index, 1)
					this.$Message.success(`设备${params.row.serialId}已移除`)
					this.$store.commit('set_storage', this.data)
				},
				onCancel: () => {
					this.$Message.info('已取消')
				}
			})
		},
		// 刷新单个设备数据
		refresh(data, index) {
			this.$set(this.data[index], 'loading', true)
			this.$http.post('/query', data).then(res => {
				if (res.data.data.length > 0) {
					Object.assign(this.data[index], res.data.data[0])
					this.$set(this.data[index], 'loading', false)
				}
			})
		}
	}
}
</script>

<style lang="less" scoped>
@import '../../assets/css/base';

.table {
	border: 0;
	width: 100% !important;

	th {
		text-align: center;
		background: none;
		border-right: 0;
	}

	td {
		border-right: 0;
	}
}

// 操作按钮
/deep/ .handle-box {
	display: flex;
	align-items: center;
	justify-content: space-around;

	.refresh .ivu-icon {
		animation: rotate 3s linear infinite;
	}
}

.ive-table-cell {
	padding: 0;
	display: flex;
	justify-content: center;
}

// 详情页
.detail-box {
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 99;
	top: 0;
	left: 0;
}

// 警报图标
/deep/ .warning-icon {
	font-size: 1.5em;

	.ivu-icon-md-checkmark {
		color: #19be6b;
	}

	.ivu-icon-md-trending-down {
		color: #2d8cf0;
	}

	.ive-icon-md-trending-up {
		color: #ed4014;
	}
}

// 侧边栏进入离开动画
.fade-enter-active,
.fade-leave-active {
	transition: all 0.5s linear;
	transform: translate3d(0, 0, 0);
}

.fade-enter,
.fade-leave-to {
	transform: translate3d(100%, 0, 0);
}</style>
